@import "../styles/mixins/index.less";
@import "../styles/themes/index.less";

.@{wux-prefix}-cascader {
	&__hd {
        position: relative;
		width: 100%;
		font-size: @cascader-font-size;
		line-height: 1.5;
		color: @cascader-color;
		/*background-color: @cascader-bg;*/

        &:after {
			.setBottomLine(@border-color-split);
		}
    }

    &__title {
    	position: relative;
    	height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		box-sizing: border-box;

		&:after {
			.setBottomLine(@border-color-split);
		}
    }

    &__menus {
    	display: flex;
    	height: 44px;
    	padding: 0 10px;
    	align-items: center;
    	box-sizing: border-box;
    }

    &__menu {
    	font-size: 13px;
    	padding: 0 10px;
    	max-width: 40%;
    	.ellipsis();

    	&--active {
			color: @assertive;
		}
    }

    &__bd {
    	width: 100%;
    	display: flex;
    	transition: transform .3s;
    	background-color: @cascader-bg;
    }

	&__inner {
		display: block;
		height: inherit;
		width: 50%;
		flex: 0 0 50%;
		background-color: @cascader-inner-bg;

		&:nth-child(2n) {
			background-color: @cascader-bg;
		}
	}

    &__scroll-view {
    	max-height: @scroll-view-size;
    }

	&__option {
		width: 100%;
		height: inherit;
		display: block;
		padding: 0 20px;
		box-sizing: border-box;
	}

	&__item {
		position: relative;
		z-index: 10;
		display: block;
		color: @heading-color;
		font-size: 13px;
		height: @cascader-item-size;
		line-height: @cascader-item-size;
		text-align: left;
		padding-right: 18px;
		.ellipsis();

		&:after {
			.setBottomLine(@border-color-split);
		}

		&--active {
			color: @cascader-item-active-color;
		}

		&--disabled {
			opacity: @disabled-opacity;
		}
	}

	&__icon {
		position: absolute;
		top: 12px;
		right: 0;
		z-index: 20;
		font-size: 0;
		line-height: 1;
	}
}
